<template>
  <div class="classroom-apply-page">
    <!-- 顶部Tab区 -->
    <el-tabs v-model="activeTab" class="main-tabs" @tab-click="handleTabChange">
      <el-tab-pane label="我的申请" name="my" />
      <el-tab-pane v-if="isTeacherOrAdmin" label="待审批" name="pending" />
      <el-tab-pane v-if="isAdmin" label="待分配" name="toAllocate" />
    </el-tabs>

    <!-- 内容区 -->
    <div class="content-area">
      <MyApplicationTable v-if="activeTab === 'my'" />
      <PendingApplicationTable v-if="activeTab === 'pending'" />
      <ToAllocateTable v-if="activeTab === 'toAllocate'" />
    </div>

    <!-- 底部统计分析区 -->
    <StatisticsCards />
    
    <!-- 申请详情抽屉 -->
    <ApplicationDetailDrawer
      v-model="detailDrawerVisible"
      :application-id="currentApplicationId"
      @approve="handleApprove"
      @allocate="handleAllocate"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import MyApplicationTable from './MyApplicationTable.vue'
import PendingApplicationTable from './PendingApplicationTable.vue'
import ToAllocateTable from './ToAllocateTable.vue'
import StatisticsCards from './StatisticsCards.vue'
import ApplicationDetailDrawer from './ApplicationDetailDrawer.vue'

// 假设有用户角色信息
const userRole = ref('ADMIN') // 临时测试用，显示全部Tab
const isTeacherOrAdmin = computed(() => ['TEACHER', 'ADMIN'].includes(userRole.value))
const isAdmin = computed(() => userRole.value === 'ADMIN')

const activeTab = ref('my')
const detailDrawerVisible = ref(false)
const currentApplicationId = ref<number>()

function handleTabChange(tab: any) {
  // 可做数据刷新等
}

function handleApprove(applicationId: number) {
  console.log('审批申请:', applicationId)
  // 这里可以调用审批API
}

function handleAllocate(applicationId: number) {
  console.log('分配教室:', applicationId)
  // 这里可以调用分配API
}
</script>

<style scoped>
.classroom-apply-page {
  background: #F5F7FA;
  min-height: 100vh;
  padding: 24px 32px;
}
.main-tabs {
  margin-bottom: 16px;
  --el-tabs-header-height: 48px;
}
.content-area {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(22,93,255,0.04);
  padding: 24px;
  margin-bottom: 24px;
  min-height: 320px;
}
.statistics-area {
  margin-top: 16px;
}
.stat-card {
  border-radius: 12px;
  min-height: 180px;
  background: #EAF2FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #165DFF;
}
</style> 